<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<!-- 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover" /> -->
		<link rel="stylesheet" type="text/css" href="css/sui.css" />
		<link rel="stylesheet" type="text/css" href="css/sui-flex.css" />
		<link rel="stylesheet" type="text/css" href="css/my.css?v=2020031412" />
		<link rel="stylesheet" type="text/css" href="index.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<script src="./js/iconfont.js"></script>
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<title></title>
		<style>
			body {
			/* background-color: #203CF4; */
			overflow-x: hidden;
			overflow-y: hidden;
		}
		.sui-list-item:last-child{
			background-image: none;
		}	
		
		.num-input{
			line-height: 3rem;
			height: 3rem;
			width: 3rem;
			border: 1px #FFFFFF solid;
			color: #FFFFFF;
			font-size: 1.25rem;
			text-align: center;
			border-radius: 50%;
		}
		
		.num-input:active{
			background: #999999;
			
		}
		
		input[type="password"]{
			background: #FFFFFF;
			width: 30%;
			border-radius: 0.25rem;
			padding-left: 0.5rem;
			font-size: 1.25rem;
			/* letter-spacing: 1rem; */
		}
		
		
	</style>

	</head>

	<body>

		<div class="sui-wrap back-box sui-flex-row sui-flex-center sui-flex-middle" id="datas" style="height: 100vh;">
			<div class="sui-title animated fadeInDown" style="width: 100%; text-align: center; height: 85px; line-height: 85px;color: #FFFFFF;">智慧水务系统</div>
			<div class="sui-flex-row sui-flex-middle sui-flex-center animated fadeIn" style="height: 20vh;width: 100%;">
				<input class="sui-input" type="password" v-model="password" placeholder="请输入密码" />
			</div>

			<div class="sui-flex-row sui-flex-center animated fadeInUp" style="width: 100%;">
				<div style="width: 40%;" class="sui-flex-col sui-flex-around">
					<p class="num-input" @click="keyIn(1)">1</p>
					<p class="num-input" @click="keyIn(2)">2</p>
					<p class="num-input" @click="keyIn(3)">3</p>
				</div>
				<div style="width: 40%;" class="sui-flex-col sui-flex-around sui-margin-t-15">
					<p class="num-input" @click="keyIn(4)">4</p>
					<p class="num-input" @click="keyIn(5)">5</p>
					<p class="num-input" @click="keyIn(6)">6</p>
				</div>
				<div style="width: 40%;" class="sui-flex-col sui-flex-around sui-margin-t-15">
					<p class="num-input" @click="keyIn(7)">7</p>
					<p class="num-input" @click="keyIn(8)">8</p>
					<p class="num-input" @click="keyIn(9)">9</p>
				</div>
				<div style="width: 40%;" class="sui-flex-col sui-flex-around sui-margin-t-15">
					<div style="width: 3rem;"> </div>
					<p class="num-input" @click="keyIn(0)">0</p>
					<p class="num-input" @click="clear()">x</p>
				</div>

				<!-- <p class="sui-flex-item-4 num-input">4</p>
				<p class="sui-flex-item-4 num-input">5</p>
				<p class="sui-flex-item-4 num-input">6</p>
				<p class="sui-flex-item-4 num-input">7</p>
				<p class="sui-flex-item-4 num-input">8</p>
				<p class="sui-flex-item-4 num-input">9</p>
				<p class="sui-flex-item-4 num-input"></p>
				<p class="sui-flex-item-4 num-input">0</p>
				<p class="sui-flex-item-4 num-input"></p> -->

			</div>



		</div>



		</div>

		<script type="application/javascript" src="lib/sui.js"></script>
		<!-- <script type="application/javascript" src="lib/sui-accordion.js"></script> -->
		<script type="application/javascript" src="lib/vue.min.js"></script>
		<script type="application/javascript" src="js/common.js"></script>




		<script type="text/javascript">
			var vm = new Vue({
				el: "#datas",
				data: {
					password: "",
					defaultPwd:"123456"
				},
				mounted: function() {

				},
				methods: {

					keyIn: function(val) {
						this.password = this.password + val;

						if (this.password.length >= 6) {
							this.judgePwd();
						}


					},
					
					judgePwd:function(){
						if (this.password == this.defaultPwd){
							sui.open("main.html");
						}else{
							sui.toastFail("用户密码不正确");
							this.clear();
						}
						
		
					},
					
					clear:function(){
						this.password = "";
					}



				}


			})
		</script>

	</body>

</html>
